<template>
  <!-- 稿件排行信息 -->
  <header>
    <div id="ranking" style="width: 50%"></div>
    <div id="sales-volume" style="width: 50%"></div>
  </header>
  <article>
    <div id="category-ranking" style="width: 50%"></div>
    <div id="periodical-grade" style="width: 50%"></div>
  </article>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
onMounted(() => {
  // 稿件阅读排行
  var ranking = echarts.init(document.getElementById("ranking"));
  ranking.setOption({
    title: {
      text: "稿件阅读排行",
      left: "10%",
    },

    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: "category",
      data: ["青年文摘", "故事会", "人民日报", "读者", "意林", "总量"],
    },
    series: [
      {
        type: "bar",
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#d9afd9" },
            { offset: 0.5, color: "#bbc2dc" },
            { offset: 1, color: "#97d9e1" },
          ]),
          borderRadius: [0, 10, 10, 0],
        },

        //background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: "#e93a4b" },
              { offset: 0.7, color: "#973b70" },
              { offset: 1, color: "#503a90" },
            ]),
          },
        },
        data: [18203, 23489, 29034, 104970, 131744, 630230],
      },
    ],
  });

  // 稿件销量排行
  var salesVolume = echarts.init(document.getElementById("sales-volume"));
  salesVolume.setOption({
    title: {
      text: "稿件销量排行",
      left: "10%",
    },

    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: "category",
      data: ["青年文摘", "故事会", "人民日报", "读者", "意林", "总量"],
    },
    series: [
      {
        type: "bar",
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#c7f882" },
            { offset: 0.5, color: "#87eec4" },
            { offset: 1, color: "#8fd3f4" },
          ]),
          borderRadius: [0, 10, 10, 0],
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: "#f8bd1e" },
              { offset: 0.7, color: "#f87c0f" },
              { offset: 1, color: "#f83c01" },
            ]),
          },
        },
        data: [18203, 23489, 29034, 104970, 131744, 630230],
      },
    ],
  });

  // 稿件分类排行数据
  var categoryRanking = echarts.init(
    document.getElementById("category-ranking")
  );
  categoryRanking.setOption({
    title: {
      text: "稿件分类数量排行",
      left: "10%",
    },
    legend: {
      top: "bottom",
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },

    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [50, 250],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },

        emphasis: {
          label: {
            show: true,
            fontSize: 25,
            fontWeight: "bold",
          },
        },
        data: [
          { value: 40, name: "基础科学", itemStyle: { color: "#2775b6" } },
          { value: 38, name: "工程科技", itemStyle: { color: "#beedc8" } },
          { value: 32, name: "农业科技", itemStyle: { color: "#e9eda5" } },
          { value: 30, name: "医药卫生科技", itemStyle: { color: "#6866c4" } },
          {
            value: 28,
            name: "哲学与人文科学",
            itemStyle: { color: "#f1b9bf" },
          },
          { value: 26, name: "社会科学", itemStyle: { color: "#71d7cd" } },
          { value: 22, name: "信息科技", itemStyle: { color: "#e7bb84" } },
          {
            value: 18,
            name: "经济与管理科学",
            itemStyle: { color: "#ff879c" },
          },
          { value: 36, name: "其他", itemStyle: { color: "#dddcd9" } },
        ],
      },
    ],
  });

  // 稿件等级占比排行
  var periodicalGrade = echarts.init(
    document.getElementById("periodical-grade")
  );
  periodicalGrade.setOption({
    title: {
      text: "稿件等级占比排行",
      left: "10%",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "bottom",
      left: "center",
    },
    toolbox: {
      show: true,

      feature: {
        mark: { show: true },

        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10,
        },

        emphasis: {
          label: {
            show: true,
            fontSize: 30,
            fontWeight: "bold",
          },
        },

        data: [
          { value: 1048, name: "普通稿件", itemStyle: { color: "#baccd9" } },
          { value: 735, name: "付费稿件", itemStyle: { color: "#22a2c3" } },
          { value: 580, name: "世纪稿件", itemStyle: { color: "#57c3c2" } },
          { value: 484, name: "核心稿件", itemStyle: { color: "#fed71a" } },
          { value: 300, name: "热点稿件", itemStyle: { color: "#b7511d" } },
        ],
      },
    ],
  });

  window.addEventListener("resize", function () {
    ranking.resize();
    salesVolume.resize();
    categoryRanking.resize();
    periodicalGrade.resize();
  });
});
</script>
<style scoped>
header {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 盒子之间留有间隔 */
  height: 400px;
}
article {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 盒子之间留有间隔 */
  margin-top: 20px;
  height: 650px;
}
</style>
